<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新用户注册</title>
		<style type="text/css">
			.error{
				color:red;
			}
			.suc{
				color: green;
				content:'ok';
			}
		</style>
		<script type="text/javascript" src="../day13/jquery-3.2.1.min.js" ></script>
		<script>
			 
			
			$(function(){
				//
				function checkEmail()
				{
					e=$("#myemail");
					if(e.val()=="")
					{
						e.next().html("电子邮件必须填写").removeClass("suc").addClass("error");
					
						//e.focus();
						return false;
					}
					//@和.是否存在
					var str=e.val();
					if(!(str.indexOf("@")>0&&str.indexOf(".")>0)){
						e.next().html("邮件格式不正确！").removeClass().addClass("error");
					
						return false;
					}
					e.next().html("✔").addClass("suc");
					return true;
				}
				//
				function checkname(){
					 var n=$("#userName");
					if(n.val().length<4||n.val().length>30)
					{
						n.next().html("长度必须在4-30之间").removeClass("suc").addClass("error");
						
						return false;
					}
					
					n.next().html("✔").addClass("suc");
					return true;
				 
				}
				//
				$("#myemail").blur(checkEmail);
				
				$("#userName").blur(checkname);
				//event是个事件对象
				$("#age").keydown(function(event){
					  
					if(event.keyCode>=48&&event.keyCode<=57||event.keyCode==8)
						return true;
					return false;
				});
				$("form").submit(function(){
					 
					var f1=checkEmail();
					var f2=checkname();
					 
					/*var p=$("#userpass");
					if(p.val().length<6)
					{
						alert("密码不能不填，且长度不能小于6，您输入的是"+p.val().length);
						return false;
					}
					//验证密码全是数字
					if(isNaN(p.val()))
					{
						alert("密码必须全是数字！");
						return false;
					}
					//两次密码要相同
					if(p.val()!=$("#repeatpass").val())
					{
						alert("两次密码必须相同！");
						return false;
					}*/
					//
					return f1&&f2;
				});
			});
		</script>
	</head>
	<body>
		<h1>青鸟论坛用户登录</h1>
		<form action="http://i.bdqn.cn/reg-email" method="post" >
			<p>
				
				<label>用户名</label><input type="text" name="userName" id="userName"/><span></span>
			</p>
			<p>
				<label>密码</label><input id="userpass" type="password" name="userpass" /><span></span>
			</p>
			<p>
				<label>确认密码</label><input type="password" name="repeatpass" id="repeatpass"/>
			</p>
			<p>
				<label>age</label><input type="text" oncontextmenu="return false;" name="age" id="age"/>
			</p>
			<p>
				<label>电邮</label><input type="text" name="myemail" id="myemail"  /><span></span>
			</p>
			<p>
				<input type="submit" value="注册"/>
			</p>
		</form>
	</body>
</html>
